<template>
    <div class="_main_y app-shop-car">
        <div class="_content_y">
            <!-- 购物车标题 start-->
            <header>
                <h3>购物车</h3>
            </header>
            <!-- 购物车标题 end-->
            <!-- 购物车部分 start-->
            <section class="shopcar-wrapper">
                <div class="empty-shopcar _flex_y">
                    <p class="_justify_center _align_center"><b style="background-image:url(./images/shopCar.png)" class="_bgimg_content"></b> <span>购物车中还没有商品，赶紧选购吧！</span></p>
                     <a href=""><span> 去逛逛</span> </a>
                </div>
                <div class="shopcar-list">

                </div>
            </section>
            <!-- 购物车部分 end-->
            <!-- 商品推荐部分 start-->
            <section class="hot-commodities _flex_y">
                <h3>热销推荐</h3>
                <ul class="commodities-list _wrap">
                    <li class="commodities-item _flex_y _align_center"
                    v-for="commoditiesItem in commoditiesList"
                    :key="commoditiesItem.prdId">
                        <img :src="['https://res.vmallres.com/pimages',commoditiesItem.photoPath,'/428_428_',commoditiesItem.photoName].join('')" alt="">
                        <span class="title">{{commoditiesItem.displayName}}</span>
                        <b class="price"><small>￥</small>{{commoditiesItem.promPrice}}</b>
                        <i class="_bgimg_content" style="background-image:url(./images/addShopCar.png)"></i>
                    </li>
                    <div class="h52-box"></div>
                </ul>
            </section>
            <!-- 商品推荐部分 end-->

        </div>
        <TabBar></TabBar>
    </div>
</template>

<script>
import * as http from '../utils/http';
export default {
    data(){
        return{
            commoditiesList:[]
        }
    },
    async created(){
         this.commoditiesList=(await http.get(this,'mcp/cart/queryEptCartRecommendPrds?portal=2&lang=zh-CN&country=CN')).products||[]
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/_border.styl'
.app-shop-car
    header
        h3
            height .42rem
            line-height .42rem
            font-size .20rem
            font-weight normal
            text-align center
    .shopcar-wrapper
        .empty-shopcar
            padding .28rem 0 .24rem
            text-align center
            p 
                b   
                    width .25rem
                    height .25rem
                    margin-right .06rem
                span 
                    height .14rem
                    line-height .14rem
                    color #888
            a 
                height .31rem
                padding-top .13rem
                display flex
                justify-content center
                span 
                    display flex
                    width .4rem
                    height .3rem
                    line-height .31rem
                    font-size .12rem
                    padding 0 .19rem
                    color #ca141d
                    border 1px 1px 1px 1px,#ca141d,solid,15px
    .hot-commodities
        background-color #f9f9f9    
        padding-bottom  .52rem
        h3 
            height .20rem
            line-height .20rem
            padding .16rem  
            text-align center 
            font-size .18rem
        .commodities-list
            margin 0 .08rem
            .commodities-item
                width 1.58rem
                overflow hidden
                background #fff
                padding .16rem .08rem .1rem
                position relative
                margin 0 .05rem  .05rem 0
                img 
                    width 1.35rem
                    height 1.35rem
                span 
                    height .13rem
                    text-align center
                    padding .16rem 0 .06rem
                b
                    height .21rem
                    line-height .21rem
                    font-size .15rem
                    font-weight 900
                    color #ca141d
                i 
                    width .25rem 
                    height .25rem
                    position absolute
                    top .06rem
                    right .09rem
            .h52-box
                width 100%
                height .52rem

</style>
